import React from "react";
import GoBack from "@/components/TheGoBack";
import TheButton from "@/components/TheButton";
import {Button, Typography, Col, Row, Space, Descriptions, Table, Tag} from "antd";
import OrderStatus from './orderStatus';
import { apiGetMhcOrderDetail } from '@/request/callReconciliation/reconcileOrder.js';
import TheTable from "@/components/TheTable";
import _ from 'lodash';
const { Paragraph } = Typography;

class Detail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            columns: [
                {
                    title: "服务",
                    dataIndex: "serviceType",
                    key: "serviceType",
                    render: (text, record) => {
                        let serviceType = ''
                        switch (text) {
                            case 'FEED':
                                serviceType = '喂养'
                                break;
                            case 'CARE':
                                serviceType = '洗护'
                                break;
                        }
                        let skuInfo = JSON.parse(record.skuInfo),skuInfoStr = ''
                        if (!_.isEmpty(skuInfo)){
                            skuInfoStr = skuInfo.specValues.map(item=>{
                                return item.specsValue
                            }).join('/')
                        }
                        return <div style={{ width: 200, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
                            {serviceType} | {skuInfoStr}
                        </div>
                    }
                },
                {
                    title: "服务时间",
                    dataIndex: "serviceDate",
                    key: "serviceDate",
                    render: (text, record) => {
                        return <Space>
                            <span>{text}</span>
                            <span>{record.serviceWeek}</span>
                            <span>{record.serviceStartTime}</span>~
                            <span>{record.serviceFinishTime}</span>
                            {record.orderDetailType === 1 && <Tag color="red">变更</Tag>}
                        </Space>
                    }
                },
                {
                    title: "金额(元)",
                    dataIndex: "orderAmount",
                    key: "orderAmount",
                    render: (text) => {
                        return <React.$Price price={text}/>
                    }
                },
                {
                    title: "实付金额(元)",
                    dataIndex: "payAmount",
                    key: "payAmount",
                    render: (text) => {
                        return <React.$Price price={text}/>
                    }
                },
                {
                    title: "退款金额(元)",
                    dataIndex: "sumRefundPrice",
                    key: "sumRefundPrice",
                    render: (text) => {
                        return <React.$Price price={text || 0}/>
                    }
                },
                {
                    title: "抽佣比例",
                    dataIndex: "commissionRatio",
                    key: "commissionRatio",
                    render: (text) => {
                        return text ? React.$transNum(text, 2, -2) + '%' : 0 + '%'
                    }
                },
                {
                    title: "服务者所得(元)",
                    dataIndex: "settlementAmount",
                    key: "settlementAmount",
                    render: (text,record) => {
                        return record.commissionStatus === '1' ? <React.$Price price={text}/> : '-'
                    }
                },
                {
                    title: "平台所得(元)",
                    dataIndex: "commissionAmount",
                    key: "commissionAmount",
                    render: (text,record) => {
                        return record.commissionStatus === '1' ? <React.$Price price={text}/> : '-'
                    }
                },
                {
                    title: "服务者",
                    dataIndex: "servicerName",
                    key: "servicerName",
                    render: (text, record) => {
                        return record.orderStatus === 'WAIT_ORDER_TAKING' ? '-' : <TheButton onClick={()=>this.onServeView(record.servicerId)}>{text}</TheButton>
                    }
                },
                {
                    title: "退款/变更",
                    dataIndex: "salesReturnDetailList",
                    key: "salesReturnDetailList",
                    render: (text) => {
                        let dom = []
                        if (text && text.length > 0){
                            text.map((item,index)=>{
                                // 售后类型：0变更前、1变更后、2退款
                                if (["0","1"].includes(item.refundDetailType)){
                                    if (item.changeStatus){
                                        switch (item.changeStatus){
                                            case '1':
                                                dom.push(<TheButton key={index} onClick={()=>this.onChangeDetailsView(item)}>待处理</TheButton>)
                                                break;
                                            case '2':
                                                dom.push(<TheButton key={index} onClick={()=>this.onChangeDetailsView(item)}>变更成功</TheButton>)
                                                break;
                                            case '0':
                                                dom.push(<TheButton key={index} onClick={()=>this.onChangeDetailsView(item)}>变更关闭</TheButton>)
                                                break;
                                        }
                                    }
                                }
                                else{
                                    if (item.refundStatus){
                                        switch (item.refundStatus){
                                            case '1':
                                                dom.push(<TheButton key={index} onClick={()=>this.onRefundDetailsView(item)}>待处理</TheButton>)
                                                break;
                                            case '3':
                                                dom.push(<TheButton key={index} onClick={()=>this.onRefundDetailsView(item)}>退款失败</TheButton>)
                                                break;
                                            case '2':
                                                dom.push(<TheButton key={index} onClick={()=>this.onRefundDetailsView(item)}>退款成功</TheButton>)
                                                break;
                                            case '0':
                                                dom.push(<TheButton key={index} onClick={()=>this.onRefundDetailsView(item)}>退款关闭</TheButton>)
                                                break;
                                        }
                                    }
                                }
                            })
                        }
                        else {
                            dom = '-'
                        }
                        // console.log(dom)
                        return dom
                    }
                },
                {
                    title: "订单行状态",
                    dataIndex: "orderStatus",
                    key: "orderStatus",
                    render: (text, render) => {
                        let label = ''
                        switch (text) {
                            case 'WAIT_PAY':
                                label = "待付款"
                                break;
                            case 'WAIT_ORDER_TAKING':
                                label = "待接单"
                                break;
                            case 'WAIT_SERVICE':
                                label = '待服务'
                                break;
                            case 'IN_PROCESS':
                                label = '服务中'
                                break;
                            case 'FINISH':
                                label = '已完成'
                                break;
                            case 'CLOSE':
                                label = '已关闭'
                                break;
                            default:
                                label = "字段值错误"
                        }
                        return label
                    }
                },
                {
                    title: "结算状态",
                    dataIndex: "commissionStatus",
                    key: "commissionStatus",
                    render: (text, render) => {
                        let label = ''
                        switch (text) {
                            case '0':
                                label = "未结算"
                                break;
                            case '1':
                                label = "已结算"
                                break;
                        }
                        return label
                    }
                },
            ],
            dataSource:[],
            relevanceColumns:[
                {
                    title: "订单编号",
                    dataIndex: "salesReturnId",
                    key: "salesReturnId",
                    render: (text, render) => {
                        if (render.orderId){
                            return render.orderId
                        }
                        else{
                            return text
                        }
                    }
                },
                {
                    title: "类型",
                    dataIndex: "refundType",
                    key: "refundType",
                    render: (text, render) => {
                        return text ? '售后订单':'普通订单'
                    }
                },
                {
                    title: "操作",
                    width: 200,
                    render: (text, render) => {
                        return (
                            <div>
                                <TheButton onClick={() => this.onView(render)}>查看订单</TheButton>
                            </div>
                        );
                    },
                },
            ],
            relevanceDataSource:[],
            mhcOrderDetail: {}
        };
    }
    async componentDidMount() {
        await this.getData()
    }
    getData = async () => {
        const {id} = this.props.match.params;
        apiGetMhcOrderDetail({
            orderId: id
        }).then(res=>{
            if (res.code === 0 && res.data){
                this.setState({
                    mhcOrderDetail: res.data,
                    dataSource: res.data.orderDetailList,
                    relevanceDataSource: res.data.relationOrderList
                })
            }
        })
    }
    // 服务者详情
    onServeView = (id) => {
        this.props.history.push(`/call/servicer/servicerList/detail/${id}/view`)
    }
    // 变更订单详情
    onChangeDetailsView = (record) => {
        this.props.history.push("/call/order/afterSaleOrder/changeDetails/" + record.salesReturnId)
    }
    // 售后订单详情
    onRefundDetailsView = (record) => {
        this.props.history.push("/call/order/afterSaleOrder/refundDetails/" + record.salesReturnId)
    }
    // 关联订单详情
    onView = (record) => {
        // refundType 不为空时 为售后单，否则为普通订单
        if (record.refundType){
            this.onRefundDetailsView(record)
        }
        else {
            this.props.history.push(`/call/order/orderList/details/${record.orderId}`)
        }
    }
    payWaySwitch = (type) => {
        switch (type) {
            case 'WECHAT':
                return '微信';
            case 'ALI':
                return '支付宝';
            default:
                return '-'
        }
    }
    render() {
        let { columns,dataSource,relevanceColumns,relevanceDataSource,mhcOrderDetail} = this.state;
        return (
            <div className="p-layout-box">
                <GoBack history={this.props.history} title={"订单详情"}/>
                <div className="p-layout-content" style={{paddingRight: 15}}>
                    <Paragraph>
                        <blockquote>
                            <Space size={40}>
                                <span>订单号：{mhcOrderDetail.orderId}</span>
                                <span>下单时间：{mhcOrderDetail.orderCreateTime}</span>
                            </Space>
                        </blockquote>
                    </Paragraph>
                    {
                        !_.isEmpty(mhcOrderDetail) && <OrderStatus orderInfo={mhcOrderDetail} history={this.props.history}></OrderStatus>
                    }
                    <br/>
                    <Descriptions layout="vertical" bordered>
                        <Descriptions.Item label="地址信息">
                            <Row>
                                <Col flex="70px">联系人:</Col>
                                <Col flex="auto">{mhcOrderDetail.userName}</Col>
                            </Row>
                            <Row>
                                <Col flex="70px">联系电话:</Col>
                                <Col flex="auto">{mhcOrderDetail.userMobile}</Col>
                            </Row>
                            <Row>
                                <Col flex="70px">服务地址:</Col>
                                <Col flex="auto">{
                                    mhcOrderDetail.province +
                                    mhcOrderDetail.city +
                                    mhcOrderDetail.district +
                                    mhcOrderDetail.address
                                }</Col>
                            </Row>
                        </Descriptions.Item>
                        <Descriptions.Item label="付款信息">
                            <Row>
                                <Col flex="70px">付款方式:</Col>
                                <Col flex="auto">{this.payWaySwitch(mhcOrderDetail.payChannel)}</Col>
                            </Row>
                            <Row>
                                <Col flex="70px">付款时间:</Col>
                                <Col flex="auto">{mhcOrderDetail.payTime}</Col>
                            </Row>
                        </Descriptions.Item>
                        <Descriptions.Item label="买家信息">
                            <Row>
                                <Col flex="70px">买家ID:</Col>
                                <Col flex="auto">{mhcOrderDetail.memberId}</Col>
                            </Row>
                            <Row>
                                <Col flex="70px">买家昵称:</Col>
                                <Col flex="auto">{mhcOrderDetail.memberNick}</Col>
                            </Row>
                        </Descriptions.Item>
                    </Descriptions>
                    <br/>
                    <TheTable
                        bordered
                        columns={columns}
                        dataSource={dataSource}
                        pagination={false}
                        rowKey={'orderId'}
                    />
                    <Paragraph>
                        <blockquote>关联订单</blockquote>
                    </Paragraph>
                    <TheTable
                        bordered
                        columns={relevanceColumns}
                        dataSource={relevanceDataSource}
                        pagination={false}
                        rowKey={'salesReturnId'}
                    />
                </div>
            </div>

        );
    }
}

export default Detail;
